<template>
  <div id="box">
    <div id="container"></div>
    <div id="box-1">
        <p>查询: <input type="text" name=""
                        @keyup.enter="getData(listName)"
                        placeholder="   区 名 ( 贵 阳 )  "
                        v-model="listName"/>
          <button @click="getData(listName)">搜索</button>
        </p>
        <p style="font-size: 20px;">实 时 天 气</p>
        <br/>
        <hr>
        <br/>
        <p>城市/区: <span> {{listData[0]}}</span></p>
        <p>天气: <span> {{listData[1]}}</span></p>
        <p>温度: <span> {{listData[2]}} °c</span></p>
        <p>风向: <span> {{listData[3]}}</span></p>
        <p>风力: <span> {{listData[4]}} 级</span></p>
        <p>空气温度: <span> {{listData[5]}}</span></p>
        <p>发布时间: <span> {{listData[6]}}</span></p>
    </div>
  </div>
</template>

<script>

import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "SeismMap",
  data() {
    return {
      listData:[],
      listName: ""
    };
  },
  mounted() {
    this.initAMap();
    this.initData(0);
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '获取数据失败'
      });
    },
    initAMap() {
      AMapLoader.load({
        key: "7cd9065f26584f9bc606fd4b300de7a9", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
            this.map = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              zoom: 11, // 初始化地图级别
              center: [106.76076, 26.63071], // 初始化地图中心点位置
            });

          }).catch((e) => {
            console.log(e);
          });
    },
    getData(param) {
      this.listName = "";
      let id = 0;
      if(param === "南明区") {
        id = 1;
      }else if(param === "云岩区") {
        id = 2;
      }else if(param === "花溪区") {
        id = 3;
      }else if(param === "乌当区") {
        id = 4;
      }else if(param === "白云区") {
        id = 5;
      }else if(param === "观山湖区") {
        id = 6;
      }
      this.listData = [];
      this.initData(id);
      this.listName = "";
    },
    initData(id) {
      // 默认贵阳市
      let param = 'getData1';
      if(id === 1) { // 南明区
        param = 'getData2';
      }
      if(id === 2) { // 云岩区
        param = 'getData3';
      }
      if(id === 3) { // 花溪区
        param = 'getData4';
      }
      if(id === 4) { //
        param = 'getData5'; // 乌当区
      }
      if(id === 5) { //
        param = 'getData6'; // 白云区
      }
      if(id === 6) { //
        param = 'getData7'; // 观山湖区
      }
      this.$axios.get('/api/weathers/' + param, {

      }).then(res =>{
        if (res.data.code === 20041) {
          this.listData.push(res.data.data.lives[0].city);
          this.listData.push(res.data.data.lives[0].weather);
          this.listData.push(res.data.data.lives[0].temperature);
          this.listData.push(res.data.data.lives[0].winddirection);
          this.listData.push(res.data.data.lives[0].windpower);
          this.listData.push(res.data.data.lives[0].humidity);
          this.listData.push(res.data.data.lives[0].reporttime);
        }
      }).catch(error =>{
        this.open4(error);
      })
    }
  },
};
</script>

<!--css-->
<style scoped>
#box {
  height: 100%;
}
#container{
  height: 100%;
  width: 100%;
}
#box #box-1 {
  width: 330px;
  height: 330px;
  background-color: rgba(255, 255, 255, 0.5);
  border: #d8d8d8 solid 1px;
  position: absolute;
  margin-left: 70%;
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
#box #box-1 p {
  margin-left: 5%;
  margin-top: 3%;
}
#box #box-1 input {
  border: #d8d8d8 solid 1px;  /*去除未选中状态边框*/
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  height: 20px;
}
#box #box-1 span {
  color: #4e5ef3;
  font-size: 14px;
}
</style>